<template>
    <div class="BookingManagement">

        <!-- 版心 -->
        <div class="Booking_wrap">

             <!-- 头部 -->
      <div class="header">
        <div class="header_top">
         <el-date-picker
      v-model="value1"
      type="date"
      @change='xzrq()'
      placeholder="选择日期">
    </el-date-picker>
        </div>

        <div class="header_bottom">
          <div class="header_left">
            <div class="header_name">
              场馆名称：
               <el-select v-model="value9" @change="gid()"  placeholder="请选择">
    <el-option
      v-for="item in options9"
      :key="item.value"
      :label="item.label"
      :value="item.gym_name">
    </el-option>
  </el-select>
            </div>

            <div class="header_number">
              预约人数：
              <span>{{shju[0]}}</span>
            </div>

            <div class="header_number">
              实际上课数：
              <span>{{shju[1]}}</span>
            </div>

            <div class="header_number">
              交易总额：
              <span>￥{{shju[2]}}</span>
            </div>
          </div>

          <div class="header_right">
           <el-button @click="wd" type="info" v-if='wds' round>筛选未到</el-button>
           <el-button @click="yd" type="info" v-if="yds" round  style="color:#fff;background:#2f7dfe;">筛选已到</el-button>
          </div>
        </div>
      </div>

      <!-- 头部结束 -->

       <!-- 表格 -->

<el-table
    :data="tableData"
    v-loading="loading"
   :row-class-name="tableRowClassName" 
    >
    <el-table-column
      type="index"
      label="序号"
    width="120"
    
      :index="indexMethod"
      
      >
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户姓名"
      width="200"
     >
     </el-table-column>
     <el-table-column
      prop="action_date"
      label="上课时间"
      width="200"
     >
    </el-table-column>
      <el-table-column
      prop="coach_name"
      label="授课老师"
     >
    </el-table-column>
     <el-table-column
      prop="phone"
      label="手机号"
     >
    </el-table-column>
     <el-table-column
      prop="action_name"
      label="预约课程"
      >
    </el-table-column>
    <el-table-column
      prop="vip_end_time"
      :formatter="dateFormat"
      label="身份"
      >
    </el-table-column>
     <el-table-column
      prop="cash_price"
      label="价格"
      >
    </el-table-column>
    <el-table-column
      :formatter="dateFormats"
      prop="booking_status"
      label="预约状态"
     >
    </el-table-column>
    
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          style="color:#fff;background:#2f7dfe;"
          @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.booking_status == 1 || scope.row.booking_status ==2">
           校验
          </el-button>
           <el-button  type="info" size="mini" v-if="scope.row.booking_status == 3 || scope.row.booking_status == 4 || scope.row.booking_status == 5">
           已到店
          </el-button>
           <el-button  type="info" size="mini" v-if="scope.row.booking_status == 6">
           已取消
          </el-button>
          <el-button  type="info" size="mini" v-if="scope.row.booking_status == 7">
           已过期
          </el-button>
      </template>
    </el-table-column>
  </el-table>
   <div style="    position: absolute;right: 17%">
        <el-pagination
       @current-change='yemian'
       :current-page='yeshu'
        layout="prev, pager, next"
        :total="shju[0]">
      </el-pagination>
     </div>
           <!-- 表格结束 -->

        </div>
         <div class="newBuilt"  v-show="addActives">
            <div class="add_owner">
                <div class="add_top">
                    <p>兑换码验证</p>
                   <span class="el-icon-circle-close" @click.stop="hides"></span>
                </div>
                <div class="add_bottom">
                    <ul>
                        <li>
                            <span>用户名称：</span>
                            <el-input v-model="mc" disabled placeholder="请输入场馆名称"></el-input>
                        </li>
                        <li>
                            <span>手机号：</span>
                            <el-input v-model='sjh' disabled placeholder="请输入场馆地址"></el-input>
                        </li>
                         <li  @click.stop="dz" >
                                <span>预约课程：</span>
                            <el-input v-model='kc' disabled placeholder="请输入场馆地址"></el-input>
                        </li>   
                        <li  >
                                <span>上课时间：</span>
                            <el-input v-model='actionDate' disabled placeholder="请输入上课时间"></el-input>
                        </li>
                        
                          <li>
                            <span>兑换码：</span>
                            <el-input v-model="dh" placeholder="请输入兑换码"></el-input>
                        </li>
                    </ul>
                </div>
                <div @click.stop="dhm" class="add_submit">确认兑换</div>
            </div>
        </div>
    </div>
</template>
<script>
import moment from 'moment'    
import { types } from 'util';
export default {
    data(){
        return{
        options9: [{
          value: '选项1',
          label: '黄金糕'
        }],
        gymIds:'',
        value9: '',
        shju:'',
        yeshu:'',
        gymId:'',
        optionsDemo:'',
        tableData: [{
          username: '魏术超',
          phone:'15135934855',
          coach_name:'',
          action_name:'动感单车',
          vip_end_time:'VIP年卡',
          cash_price:'￥49',
          booking_status: '已预约',
        },],
        loading:true,
        value1:'',
        wds:false,
        yds:true,
        addActives:false,
        mc:'',
        sjh:'',
        kc:'',
        dh:'',
        uId:'',
        kId:'',
        actionDate:''
        }
    },
    mounted(){
      this.ajax()
    },
    methods:{
      hides(){
        this.addActives=false
      },
      wd(){
        this.ajax('','','',1)
        this.wds=false
        this.yds=true
      },
       yd(){
        this.ajax('','','',2)
        this.wds=true
        this.yds=false
      },
      xzrq(){
        this.ajax('','',(new Date()).getTime(this.value1))
      },
       sx(){
          this.audio=''
          this.zdl=false
          window.location.reload()
      },
      yemian(yeshu){
        this.ajax('',yeshu)
    },  
     gid(){
          var arr=this.options9
          this.optionsDemo=this.value9
          console.log(this.value9)
          for (var i=0;i<arr.length;i++){
            if(this.value9 == arr[i].gym_name){
               this.gymId=arr[i].id
            }
          }
          this.ajax()
    },
       dateFormat:function(row, column) {
               var date = row[column.property];
          if (date == undefined) {
             return "";
          }else if(date > 0 && date != null){
             return "VIP";
          }else if(date < 0 && date == null){
            return "普通用户";
          }
        },
        dateFormats:function(row, column) {
               var date = row[column.property];
          if (date == undefined) {
             return "";
          }else if(date == 1){
             return "已经下单";
          }else if(date == 2){
             return "待上课";
          }else if(date == 3){
             return "正在上课";
          }else if(date == 4){
             return "待评价";
          }else if(date == 5){
             return "已评价";
          }else if(date == 6){
             return "取消预约";
          }else if(date == 7){
             return "已过期";
          }
        },
       ajax(mhcx,yeshu,times,type){
       let obj = {
        }
        let _this = this;
        let qs = require("qs");
         this.$axios.post("yujiaextend/gymadmin/findAllGymBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
          if( _this.gymId == ''){
              _this.gymId=response.data.data[0].id
          }
          // _this.gymIds=response.data.data[0].gym_name
          _this.value9=JSON.stringify(response.data.data[0].gym_name).replace(/"/g, " ")
            if(_this.optionsDemo != ''){
             _this.value9=_this.optionsDemo
          }
          _this.options9=response.data.data
          var obj={
            gymId:_this.gymId,
            name:mhcx,
            page:yeshu,
            datetime:times,
            type:type
          }
          let qs = require("qs");
          _this.$axios.post("/yujiaextend/gymadmin/findAllSuccessPeopleByAdmin", qs.stringify(obj), {
              headers: {
              "Content-Type": "application/x-www-form-urlencoded"
              }
          })
          .then((response) =>{
              _this.loading=false
              _this.shju=response.data.data
              _this.tableData=response.data.data[3]
              console.log(response.data.data)
                if(response.data.data[3]== ''){
                _this.$message({
                    message: '暂无该馆',
                    type: 'warning'
                  });     
           }
          })
          .catch(function(error) {
              console.log(error);
          });
        })
        .catch(function(error) {
            console.log(error);
        });
    },
    dhm(){
       var obj={
            userId:this.uId,
            actionId:this.kId,
            code:this.dh
          }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/updateUserIsSuccess", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
           if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: '客人已到店!'
                });
                _this.addActives=false
                _this.dh=''
                _this.ajax()
            }else{
                 _this.$message({
                    type: 'error',
                    message: response.data.message
                });
            }
        })
        .catch((error)=> {
            console.log(error);
        });
    },
   indexMethod(index) {
        return index * 1+1;
      },
       handleEdit(index, row) {
         console.log(row)
         this.uId=row.user_id,
         this.kId=row.action_id
         this.addActives=true
         this.mc=row.username
         this.sjh=row.phone
         this.kc=row.action_name
         this.actionDate=row.action_date
         

        //   this.$confirm('此操作将确认客人已经到店（超管端）, 是否继续?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //  var obj={
        //     userId:row.user_id,
        //     actionId:row.action_id
        //   }
        // let _this = this;
        // let qs = require("qs");
        // this.$axios.post("/yujiaextend/gymadmin/updateUserIsSuccess", qs.stringify(obj), {
        //     headers: {
        //     "Content-Type": "application/x-www-form-urlencoded"
        //     }
        // })
        // .then(function(response) {
        //    if(response.data.code == 1){
        //          _this.$message({
        //             type: 'success',
        //             message: '客人已到店!'
        //         });
        //         _this.ajax()
        //     }else{
        //          _this.$message({
        //             type: 'error',
        //             message: '确认失败！'
        //         });
        //     }
        // })
        // .catch((error)=> {
        //     console.log(error);
        // });
       
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消删除'
        //   });          
        // });

      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    }
  
}
</script>
<style>
    .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<style scoped>

.BookingManagement{
 width: 100%;
  height: 100%;
  background: #f2f2f2;
  position: absolute;
  left: 250px;
  top: 0;
  z-index: 2;
}
/* 版心 */
.Booking_wrap{
 width: 100%;

  height: 100%;

  margin-left: 3%;
}
.Booking_wrap .header {
  width: 100%;

  margin-top: 35px;
}

.Booking_wrap .header .header_top .el-input{
    width: 8%;
    

}

.Booking_wrap .header .header_bottom {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 30px;

  padding-bottom: 20px;

  border-bottom: 1px solid #cdcdcd;
}

.Booking_wrap .header .header_bottom .header_left {
  font-size: 16px;

  color: #000000;

  display: flex;

  align-items: center;
}

.el-date-editor {
  width: 100%;
}

.el-date-editor {
  line-height: 35px;
}

.el-select {
  width: 100%;
}

.Booking_wrap .header .header_bottom .header_name {
  font-size: 15px;

  color: #000000;
  display: flex;
  align-items: center;
}
.Booking_wrap .header .header_bottom .header_name .el-select{
    width: 65%;
}
.Booking_wrap .header .header_bottom .header_name span {
  color: #286fe6;
}

.Booking_wrap .header .header_bottom .header_number {
  font-size: 15px;

  color: #000000;

  margin-left: 26px;
}

.Booking_wrap .header .header_bottom .header_number span {
  color: #286fe6;
}

.Booking_wrap .header .header_bottom .header_right {
  display: flex;

  align-items: center;

  padding-right: 30%;
}
.Booking_wrap .header .header_bottom .header_right .el-button{
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    background: #aaaaaa;
    border: none;
    outline: none;
}
/* 版心结束 */
/* 表格 */
.el-table{
    width: 80%;
    margin-top: 20px;

}
.el-table tr th{
text-align: center!important;
}
.newBuilt{
    width:100%;
    height:100%;
    position: absolute;
    left:-250px;
    top:0%;
    z-index:5;
    background:rgba(0,0,0,0.4)

}
.newBuilt .add_owner{
    width:560px;
    background:#fff;
    margin:10px auto;
    border-radius:6px;
    box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, .1);
    padding:0 40px;
    padding-bottom:40px;
    margin-top: 10%;
}
.newBuilt .add_owner .add_top{
 width:100%;
  display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top:40px;
}
.newBuilt .add_owner .add_top p{
    font-size:20px;
    padding-bottom:5px;
    border-bottom:3px solid #286fe6;
    color:#000;
    font-weight:bold;
}
.newBuilt .add_owner .add_top span{
    font-size:18px;
    display: inline-block;
}
.newBuilt .add_owner .add_bottom{
    width:100%;
}
.newBuilt .add_owner .add_bottom>ul{
    width:100%;
}
.newBuilt .add_owner .add_bottom>ul>li{
    width:94%;
     display: flex;
    align-items: center;
    margin-top:35px;

}
.newBuilt .add_owner .add_bottom>ul>li>span{
    display: inline-block;
    width:25%;
    font-size:16px;
    color:#000000;
}
.newBuilt .add_owner .add_bottom ul>li ol{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.newBuilt .add_owner .add_bottom ul>li ol li{
     display: flex;
    align-items: center;
    background: url(../../assets/images/venue_management/venue_03.png) no-repeat;
    background-size: 100% 100%;
    padding: 3px 10px;
    font-size: 13px;
    color: #fff;
    margin-right: 12px;
    margin-bottom: 10px;
}
.newBuilt .add_owner .add_bottom ul>li ol li i{
    margin-left: 15px;
}
.newBuilt .add_owner .add_bottom ul>li  .view{
    width: 100%;
    padding-bottom: 6px;
    border-bottom: 1px solid #cdcdcd;
    text-align: right;
}
.newBuilt .add_owner .add_bottom ul>li .label{
    width:100%;
}
.newBuilt .add_owner .add_bottom ul>li .label .label_top{
    width: 100%;
    display: flex;
    align-items: center;
}
.newBuilt .add_owner .add_bottom ul>li .label .label_top i{
    color: #aaaaaa;
}
.newBuilt .add_owner .add_bottom ul>li .label .label_top font{
    font-size: 14px;
    color: #444444;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list{
    width: 100%;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list>ul{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list>ul>li{
     padding: 5px 0;
   padding-right: 16px;
   padding-left: 8px;
  
    margin-top: 10px;
    background: url(../../assets/images/venue_management/venue_07.png) no-repeat;
    background-size: 100% 100%;
    margin-right: 12px;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list>ul>li i{
    font-size: 12px;
    color: #b4b4b4;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list>ul>li span{
    font-size: 12px;
    color: #606060;
}
.newBuilt .add_owner .add_submit{
    width:52%;
    height:40px;
    line-height:40px;

    margin:0 auto;
    text-align:center;
    background:#2f7dfe;
    border-radius:4px;
    margin-top:40px;
    font-size:16px;
    color:#fff;
}
</style>


